<template>
  <div id="index">
    <div class="bg">
      <div class="content">
        <div class="head clearfix">
          <h1 class="">非现场执法监督平台</h1>
          <div class="time" id="showTime"></div>
        </div>
        <div class="mainbox">
          <ul class="clearfix nav1">
            <li style="width: 26%">
              <div class="box" style="height: 40%">
                <div class="tit"><span>一周车辆数据</span><p></p></div>
                <div class="boxnav">
                  <dv-charts :option="weekCarOption" />
                </div>
              </div>
              <div class="box" style="height: 20%">
                <div class="tit"><span>车流量统计</span><p></p></div>
                <div class="boxnav">
                  <ul class="ylfw">
                    <li><div class="ylfwbox fora">
                      <p>2轴车</p>
                      <ol><span>40%</span></ol>
                      <div class="forb"></div>
                    </div></li>
                    <li><div class="ylfwbox fora">
                      <p>3轴车</p>
                      <ol><span>5%</span></ol>
                      <div class="forb"></div></div></li>
                    <li><div class="ylfwbox fora">
                      <p>4轴车</p>
                      <ol><span>3%</span></ol>
                      <div class="forb"></div>
                    </div></li>
                  </ul>
                </div>
              </div>
              <div class="box" style="height: 40%">
                <div class="tit"><span>今日车辆数据</span><p></p></div>
                <div class="boxnav">
                  <dv-charts :option="todayCarOption" />
                </div>
              </div>
            </li>
            <li style="width:48%">
              <div class="box" style="height: 60%">
                <stationMap></stationMap>
              </div>
              <div class="box" style="height: 40%">
                <div class="tit"><span>过车数据</span><p></p></div>
                <div class="boxnav">
                  <dv-scroll-board :config="configList" ref="scrollBoard"/>
                </div>
              </div>
            </li>
            <li style="width: 26%">
              <div class="box" style="height: 40%">
                <div class="tit"><span>今日车辆数据</span><p></p></div>
                <div class="boxnav">
                  <dv-charts :option="pieOption" />
                </div>
              </div>
              <div class="box" style="height: 20%">
                <div class="tit"><span></span><p></p></div>
                <div class="boxnav">
                  <ul class="tqdb">
                    <li>
                      <i class="el-icon-s-order" style="font-size:40px;"></i>
                      <h3>立案中</h3>
                      <h3>{{ yla }} 车次</h3>
                    </li>
                    <li>
                      <i class="el-icon-s-order" style="font-size:40px;"></i>
                      <h3>已结案</h3>
                      <h3>{{ yja }} 车次</h3>
                    </li>
                    <li>
                      <i class="el-icon-s-order" style="font-size:40px;"></i>
                      <h3>今日车辆</h3>
                      <h3>{{ cll }} 车次</h3>
                    </li>
                    <li>
                      <i class="el-icon-s-order" style="font-size:40px;"></i>
                      <h3>超载车辆</h3>
                      <h3>{{ czs }} 车次</h3>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="box" style="height: 40%">
                <div class="tit"><span>预警</span><p></p></div>
                <div class="boxnav">
                  <dv-capsule-chart :config="chartConfig" style="width:100%;height:100%" ref="capsuleChart"/>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import stationMap from './components/stationMap'

export default {
  components: { stationMap },
  data() {
    return {
      loading: true,
      listQuery: {
        page: 1,
        limit: 20,
        params: {},
      },
      configList: {
        rowNum: 8,
        header: [
          "站点名称",
          "车牌号",
          "过车时间",
          "轴数",
          "车货总量(吨)",
          "超重率(%)",
          "限重(吨)",
        ],
        data: [],
        columnWidth: [
          140,
          120,
          200,
          60,
          120,
          100,
          90
        ],
        headerHeight: 25,
        headerBGC: "",
        oddRowBGC: "",
        evenRowBGC: ""
      },
      chartConfig: {
        data: [{
          name: "", value: "526"
        },{
          name: "", value: "473"
        },{
          name: "", value: "109"
        },{
          name: "", value: "75"
        },{
          name: "", value: "73",
        }],
        unit: '1',
        showValue: true
      },
      // 今日车辆饼图
      pieOption: {
        title: {
          text: "今日车辆数据",
          style: {
            fill: "#fff",
          },
          show: false,
        },
        series: [
          {
            type: "pie",
            data: [
              { name: "超载", value: 1 },
              { name: "未超载", value: 4 },
            ],
            insideLabel: {
              show: true,
            },
          },
        ],
      },
      // 今日车辆数据
      todayCarOption: {
        title: {
          text: "今日车辆数据",
          show: false,
        },
        legend: {
          textStyle: {
            fill: "#fff",
          },
          top: 30,
          data: [
            {
              name: "车辆总数",
              color: "#aeeff0",
            },
            {
              name: "超载数量",
              color: "#f1829f",
            },
          ],
        },
        xAxis: {
          name: "时间点",
          nameTextStyle: {
            fill: "#fff",
          },
          data: [],
          axisLabel: {
            // formatter: "{value}时",
            style: {
              fill: "#fff",
            },
          },
        },
        yAxis: {
          name: "车辆数",
          data: "value",
          min: 0,
          nameTextStyle: {
            fill: "#fff",
          },
          axisLabel: {
            style: {
              fill: "#fff",
            },
          },
        },
        series: [],
      },
      // 一周车辆数据
      weekCarOption: {
        title: {
          text: "一周车辆数据",
          show: false,
        },
        legend: {
          textStyle: {
            fill: "#fff",
          },
          top: 30,
          data: [
            {
              name: "车辆总数",
              // color: "#aeeff0",
            },
            {
              name: "超载数量",
              // color: "#f1829f",
            },
          ],
        },
        xAxis: {
          // name: "第一周",
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
          axisLabel: {
            // formatter: "{value}%",
            style: {
              fill: "#fff",
            },
          },
        },
        yAxis: {
          name: "车辆数",
          data: "value",
          min: 0,
          nameTextStyle: {
            fill: "#fff",
          },
          axisLabel: {
            // formatter: "{value}%",
            style: {
              fill: "#fff",
            },
          },
        },
        series: [],
      },
      cll: 0,
      czs: 0,
      yla: 0,
      yja: 0,
      ylaConfig: {
        number: [2],
        content: "{nt} 辆次",
        style: {
          fontSize: 20,
          fill: "#fff",
        },
      }
    };
  },
  mounted() {

  },
  created() {
    this.fetchData();
    this.handleChartsOptions();
  },
  methods: {
    fetchData() {

    },
    handleChartsOptions() {

    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/styles/datavTest.scss";

.bg {
  background-image: url("../../assets/datav/bg.png");
  max-height: 100vh;
}
</style>

<style>
#index .dv-scroll-board .header {
  font-size: 12px;
  border-bottom: 1px solid #407ABD;
}
#index .dv-scroll-board .rows .row-item{
  font-size: 11px;
  border-bottom: 1px dashed #407ABD;
}
#index .el-radio__label{
  color: #fff;
  font-size: 8px;
}
</style>
